<template>
  <div class="main">
    <bank-list
      v-for="(item, index) in data"
      :key="index"
      ref="bankList"
      :cardItem="item"
      @delCard="delCard"
    ></bank-list>
    <div
      :class="haveCard ? addCardOne : addCard"
      @click="$commonJs.goPage('personAddCard')"
    >
      <div>
        <i class="iconfont iconplus"></i>
        <p>添加银行卡</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "mand-mobile";
export default {
  name: "login",
  components: {
    bankList: () => import("@/components/bankCard/index")
  },
  data() {
    return {
      data: [],
      haveCard: false,
      addCardOne: "addCardOne",
      addCard: "addCard"
    };
  },
  methods: {
    judgePwd() {
      this.$ajax
        .post(this.$api.judgePayPwd)
        .then(res => {
          if (res.data.is_pay === "NO") {
            Dialog.failed({
              title: "提示",
              content: "您还未设置支付密码，请前往设置！",
              confirmText: "去设置",
              onConfirm: () => this.$router.push("/index/person/set-pay-psw"),
              onCancel: () => this.$router.go(-1)
            });
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    cardList() {
      this.$ajax
        .post(this.$api.cardList)
        .then(res => {
          this.data = res.data.data;
          if (this.data.length > 0) {
            this.haveCard = true;
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    delCard(id) {
      this.$ajax
        .post(this.$api.deleteBankCard, { bank_id: id })
        .then(() => {
          this.cardList();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  mounted() {
    this.judgePwd();
    this.cardList();
  }
};
</script>

<style scoped lang="stylus">
.main{
  padding 40px 50px;
}
.addCard>div{
  width 100%;
  border 2px dashed #327EB8;
  border-radius:16px;
  text-align center;
  padding 77px 0;
  color #327EB8
}
.addCard>div>p{
  margin-top 30px;
}
.addCardOne>div{
  display flex;
  padding 30px 0;
  width 382px;
  border 2px dashed #327EB8;
  border-radius:16px;
  margin 100px auto;
  font-size 30px;
  color #327EB9;
  justify-content center;
}
.addCardOne>div>i{
  font-size 30px;
}
.addCardOne>div>p{
  margin-left 15px;
}
</style>
